<template>
  <div class="register">
    <el-form ref="registerRef" :model="registerForm" :rules="registerRules">
      <el-form-item prop="userName">
        <el-input v-model="registerForm.userName" placeholder="用户名"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="password" v-model="registerForm.password" placeholder="密码"></el-input>
      </el-form-item>
      <el-form-item prop="confirmPassword">
        <el-input
          type="password"
          v-model="registerForm.confirmPassword"
          placeholder="确认密码"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-upload
          ref="avatarUpload"
          :auto-upload="false"
          :limit="1"
          :on-change="handleAvatarChange"
        >
          <template #trigger>
            <el-button type="primary">点击选择头像</el-button>
          </template>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="register" class="register-button">注册</el-button>
      </el-form-item>
      <el-form-item>
        <router-link to="/login">使用已有账户登录</router-link>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { useLoginStore } from '@/stores/loginStore'
import { request } from '@/utils/request'
import { ElMessage } from 'element-plus'
import { ref } from 'vue'

const loginStore = useLoginStore()

const registerRef = ref(null)
const registerForm = ref({
  userName: 'liarjo',
  password: '123456',
  confirmPassword: '123456',
  avatar: null,
})
const avatarUpload = ref(null)

const confirmPassword = (rule, value, callback) => {
  if (registerForm.value.password !== value) {
    callback(new Error('两次输入的密码不一致'))
  } else {
    callback()
  }
}
const registerRules = {
  userName: [
    { required: true, trigger: 'blur', message: '请输入您的用户名' },
    { min: 4, max: 20, message: '用户名长度必须介于 4 和 20 之间', trigger: 'blur' },
  ],
  password: [
    { required: true, trigger: 'blur', message: '请输入您的密码' },
    { min: 4, max: 20, message: '密码长度必须介于 5 和 20 之间', trigger: 'blur' },
  ],
  confirmPassword: [
    { required: true, trigger: 'blur', message: '请输入您的确认密码' },
    { required: true, validator: confirmPassword, trigger: 'blur' },
  ],
}

const register = async () => {
  await registerRef.value.validate(async (valid) => {
    if (valid) {
      try {
        const formData = new FormData()
        formData.append('userName', registerForm.value.userName)
        formData.append('password', registerForm.value.password)
        if (registerForm.value.avatar) {
          formData.append('avatar', registerForm.value.avatar)
        }

        const response = await request.post('/api/register', formData, {
          headers: {
            'Content-Type': 'multipart/form-data',
          },
        })
        const registerResult = response.data
        ElMessage.success({
          message: '注册成功',
          duration: 2000,
        })
        loginStore.setLoginInfo(registerResult)
      } catch (error) {
        ElMessage.success({
          message: error.message,
          duration: 2000,
        })
      }
    }
  })
}
const handleAvatarChange = (file) => {
  registerForm.value.avatar = file.raw
}
</script>

<style lang="scss" scoped>
.register {
  width: 300px;
  margin: 0 auto;
  padding: 20px;
  .register-button {
    width: 100%;
  }
}
</style>
